<demo>Demo 1</demo>
<template>
  <div>
    <Button @click="handleToggle">toggle</Button>
    <Dialog v-model:visible="visible"
      :ok="handleOk"
      :cancel="handleCancel">
      <template v-slot:content>
        <div>Hello</div>
        <div>Dialog</div>
      </template>
      <template v-slot:title>
        <strong>Dialog Title</strong>
      </template>
    </Dialog>
  </div>
</template>
<script lang="ts">
import Dialog from '../lib/Dialog.vue'
import Button from '../lib/Button.vue'
import { ref } from 'vue'

export default {
  components: {
    Dialog,
    Button,
  },
  setup() {
    const visible = ref(false)
    const handleToggle = () => {
      visible.value = !visible.value
    }
    const handleOk = () => {
      return true
    }
    const handleCancel = () => {}
    return {
      visible,
      handleToggle,
      handleOk,
      handleCancel,
    }
  }
}
</script>